<template>
  <div class="service">
    <div class="container">
      <div class="local">
        <img src="~/assets/images/local.png" alt="" />
        <span>当前位置 : 包装材料>塑料瓶类
          <img src="@/assets/images/home/icon.png" alt="" />
          {{ info.store_name }}
        </span>
      </div>

      <product-desc :info="info" />

      <div class="sertab">
        <van-tabs>
          <van-tab title="服务详情">
            <div class="content">
              <h3>{{ info.store_name }}</h3>
              <div class="pic-box">
                <img src="~/assets/images/product.png" alt="" class="object" />
              </div>
              <div class="pro-desc">
                <!-- //todo -->
                自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情
                自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情
                自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情
                自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情自定义产品详情
                自定义产品详情自定义产品详情自定义产品详情
              </div>
            </div>
          </van-tab>
          <van-tab title="企业信息"></van-tab>
        </van-tabs>
      </div>

      <recommend class="ser-recommend" :list="list" @changeProduct="seeProductDe" />

      <div class="guess">
        <div class="title">
          <h2>猜你需要</h2>
        </div>
        <div class="content">
          <div class="ser-item" v-for="(item, index) in likeList" :key="index">
            <div class="pic-box">
              <img :src="item.image" alt="" class="object" />
              <i class="collect">
                <div class="heart" />
              </i>
            </div>
            <div class="ser-desc">
              <h3>{{ item.store_name }}</h3>
              <p class="pro-number">
                <span>产品编号：</span>{{ item.product_code || "--" }}
              </p>
              <p class="pro-info">{{ item.desc }}</p>
              <div class="num">
                数量:
                <input type="text" v-model="item.pcs" />
                Pcs
              </div>
              <div class="btn">
                <a @click="cart(item.product_id,item.pcs)" class="into-cart">
                  <img src="~/assets/images/whitecart.png" alt="" />
                  加入购物车
                </a>
                <a class="ask-price cursor" @click="goInquiry(item.product_id, item.mer_id)">发起询价</a>
              </div>
            </div>
            <div class="price-box">
              <p class="discount-time" v-if="item.create_time">
                <span>折扣时间：</span>{{ item.create_time }}
              </p>
              <div class="discount" v-if="item.create_time">
                <p class="discount">折扣价:</p>
                <p class="newprice">￥{{ item.ot_price }}</p>
                <p class="old-price">原价:
                  <span>￥{{ item.price }}</span>
                </p>
              </div>
              <p class="price" v-else>价格:
                <span>￥{{ item.price }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductDesc from "@/components/ProductDesc"
import Recommend from "@/components/Recommend"
import Vue from "vue"
import { Tab, Tabs } from "vant"
Vue.use(Tab).use(Tabs)
import { getRecommend, getGuess, getProductsDe } from "@/request/api"

export default {
  name: "IndustryService",
  components: {
    ProductDesc,
    Recommend
  },
  data() {
    return {
      info: {},
      list: [],
      likeList: []
    }
  },
  created() {
    this.getDetailInfo()
    this.getRecommendList()
    this.guess()
  },
  methods: {
    getDetailInfo() {
      let id = this.$route.params.id
      getProductsDe(id).then(res => {
        if(res.status === 200) {
          this.info = res.data
        }else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getRecommendList() {
      const data = {
        page: 1,
        limit: 10,
        id: this.$route.params.id
      }
      getRecommend(data).then(res => {
        if(res.status === 200) {
          this.list = res.data.data
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    guess() {
      let data = {
        page: this.page,
        limit: this.limit,
        id: this.$route.params.id
      }
      this.likeList = []
      getGuess(data).then(res => {
        this.total = res.data.total
        const data = res.data.data
        for (const i in data) {
          data[i].pro_ste = data[i].pro_ste.split("")
        }
        this.likeList = data
      }).catch(err => {
          this.$message.error(err.message)
        })
    },
    seeProductDe(id) {
      this.$router.push({
        name: "CateProduct",
        params: {id},
        query: {t: Date.now()}
      })
    },
    cart(id,pcs) {
      if (!this.$store.state.access_token) {
        this.$router.push({ name: "Login" })
        return;
      }
      const data = {
        cart_num: pcs,
        is_new: 0, // 判断是否是新加入
        product_id: id,
        product_type: 0  // 判断加入类型
      }
      addCart(data).then(res => {
        if (res.status === 200) {
          this.$message.success("加入成功")
        }else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    goInquiry(id, mid) {
      this.$router.push({
        name: "CateInquiry",
        query: { mid: mid, proId: id }
      })
    }
  }
}
</script>

<style scoped>
.service {
  background: #f3f3f7;
  padding: 45px 0 77px;
}
.local {
  color: #656565;
  margin-bottom: 67px;
}
.local img {
  margin-right: 10px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.sertab {
  margin-top: 26px;
}
.sertab >>> .van-tabs__wrap {
  height: 60px;
}
.sertab >>> .van-tabs__nav {
  display: flex;
  height: 60px;
  background: #e38b2e;
}
.sertab >>> .van-tab {
  font-size: 16px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 0;
}

.sertab >>> .van-tab--active {
  background: #0085e8;
}
.sertab >>> .van-tabs__line {
  color: #fff;
  background: #0085e8;
  z-index: -1;
}
.sertab >>> .van-tabs__nav--line {
  padding: 0;
}
.sertab .active {
  color: #fff;
  background: #0085e8;
}
.sertab .content {
  padding: 64px 30px 84px;
  background: #fff;
}
.sertab .content h3 {
  color: #797979;
  font-size: 20px;
  font-weight: bold;
}
.sertab .content .pic-box {
  width: 100%;
  height: 553px;
  margin: 24px 0 48px;
}
.pro-desc {
  font-size: 16px;
  color: rgb(101, 101, 101);
  line-height: 30px;
}
.ser-recommend {
  margin: 30px 0;
}
.guess .title {
  position: relative;
  font-size: 20px;
  color: #4d4d4d;
  background: #f3f3f7;
  z-index: 100;
}
.guess .title h2 {
  background: #f3f3f7;
  padding-right: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.guess .content {
  padding-top: 36px;
}
.ser-item {
  display: flex;
  align-items: flex-start;
  padding: 30px 28px;
  color: #666;
  background: #fff;
  border: 1px solid #e9e9e9;
  font-size: 16px;
  margin-bottom: 16px;
}
.ser-item .pic-box {
  width: 296px;
  height: 303px;
  position: relative;
}
.ser-item .pic-box .collect {
  position: absolute;
  top: 6px;
  right: 6px;
  display: block;
  width: 33px;
  height: 33px;
  background: #fff;
  opacity: 0.28;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ser-desc {
  flex: 3;
  margin: 0 30px;
}
.ser-desc h3 {
  font-size: 20px;
  font-weight: bold;
  color: #4d4d4d;
}
.ser-desc p {
  margin-top: 18px;
}
.ser-desc .pro-info {
  font-size: 14px;
  color: #969696;
}
.num {
  margin: 23px 0;
}
.num input {
  width: 220px;
  height: 35px;
  border: 1px solid rgb(101, 101, 101);
  border-radius: 10px;
  margin: 3px 10px;
  padding: 0 10px;
}

.btn a {
  padding: 10px 18px;
  color: #fff;
  background: rgb(227, 139, 43);
  border-radius: 10px;
  margin-right: 14px;
}
.btn a:hover {
  opacity: 0.8;
}
.into-cart img {
  vertical-align: middle;
  margin-right: 5px;
}
.btn .ask-price {
  color: #e38b2b;
  background: #fff;
  border: 1px solid rgb(227, 139, 43);
}
.price-box {
  width: 375px;
  padding: 26px 12px 22px;
  background: #f3f4f7;
  color: #666;
  border: 1px solid #e9e9e9;
  line-height: 30px;
  overflow: hidden;
}
.price-box .discount-time {
  font-size: 14px;
}
.price-box .newprice {
  font-size: 40px;
  margin: 15px 0 22px;
}
.price-box .price span {
  font-size: 40px;
  display: block;
  margin-top: 15px;
}
.price-box .old-price {
  color: #b6b6b6;
}
.price-box .old-price span {
  display: block;
  font-size: 24px;
  text-decoration: line-through;
  margin-left: 20px;
}
.title h2 {
  padding-left: 16px;
}
.title h2::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 5px;
  height: 20px;
  background: #797979;
  border-radius: 3px;
}
.wink:hover {
  color: #e38b2b;
}

.heart {
  width: 20px;
  height: 20px;
  background: url("~@/assets/images/shoucanglogo.png");
  background-size: 50px;
  background-position: -4px -3px;
}
</style>
